<template>
	<view class="myCollection">
		<view class="topBack">
			<view class="myCollectionList">
				<u-swipe-action v-for="(item,index) in collectList" :index="index" :key="item.id" :show="item.show"
					:options="options" @click="handleDelete(item, index)">
					<view class="myCollectionItem" @tap="goProductDetails(item)">
						<image class="myCollectionItemLeft" :src="item.image"></image>
						<view class="myCollectionItemRight">
							<view class="myCollectionItemRightTop">{{item.title}}</view>
							<text class="myCollectionItemRightIn">{{item.intro}}</text>
							<text class="myCollectionItemRightBottom"><text class="fh">￥</text>{{item.price}}</text>
						</view>
					</view>
				</u-swipe-action>
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
			</view>

		</view>
	</view>
</template>

<script>
	import {
		collectList,
		delCollect
	} from '@/api/my.js'
	export default {
		data() {
			return {
				options: [

					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				pages: {
					page: 1,
					limit: 10,
				},
				status: 'loadmore',
				iconType: 'circle',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				collectList: [],
			}
		},
		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {
			// 我的收藏列表
			this.pages.page = 1;

			this.myCollection();
		},
		onReachBottom() {


			this.pages.page++;
			this.myCollection();
		},

		onLoad(options) {

		},

		watch: {

		},
		methods: {
			handleDelete(data, index) {
				let that = this
				uni.showModal({
					title: '删除收藏',
					content: '删除收藏需要重新添加哦~~',
					success: function(res) {
						if (res.confirm) {
							delCollect({
								goods_id: data.id
							}).then(res => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								that.myCollection();

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				console.log(data, 'data')
			},

			goProductDetails(item) {
				uni.navigateTo({
					url: "/pages/productDetails/productDetails?id=" + item.id
				})
			},
			myCollection() {
				let data = this.pages;
				collectList(data).then((res) => {
					console.log(res, '我的收藏列表')
					if (res.code == 200) {
						// this.goodsList = res.data.list;
						if (this.pages.page == 1) {
							if (res.data.list.length == 0) {

								this.status = this.loadText.nomore;
							}

							this.collectList = res.data.list;


						} else if (this.pages.page > 1) {
							if (res.data.list.length == 0) {

								this.status = this.loadText.nomore;
							} else {

								this.collectList = [...this.collectList, ...res.data.list]

							}


						}
						this.collectList.forEach((item, index) => {
							// item.checked=true;
							this.$set(item, 'show', false)
						})
					}
				}).catch((res) => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.myCollection {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.topBack {
		width: 750rpx;
		height: 216rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		border-radius: 0rpx;
		display: flex;
		flex-direction: column;
		padding: 40rpx 30rpx 0 30rpx;
		box-sizing: border-box;
	}

	.myCollectionList {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: 127rpx;
		box-sizing: border-box;
	}

	.myCollectionItem {
		width: 690rpx;
		height: 249rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		padding: 30rpx 37rpx 19rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.myCollectionItemLeft {
		width: 200rpx;
		height: 200rpx;

		border-radius: 10rpx;
	}

	.myCollectionItemRight {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.myCollectionItemRightTop {
		width: 403rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.myCollectionItemRightIn {
		width: 407rpx;
		//2.设置不换行
		white-space: nowrap;
		//3.超出隐藏
		overflow: hidden;
		//4.文本超出绘制小黑圆点（省略号）

		text-overflow: ellipsis;
		margin-top: 8rpx;
	}

	.myCollectionItemRightBottom {
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #EB1515;
		margin-top: 18rpx;
	}

	.fh {
		font-size: 24rpx;
	}
</style>